<template>
  <div class="setting-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <!-- 左侧 -->
          <el-tab-pane label="角色管理">
            <!-- 按钮 -->
            <el-button
              icon="el-icon-plus"
              size="small"
              type="primary"
              @click="centerDialogVisible = true"
              >新增角色</el-button
            >
            <!-- 表格 -->
            <el-table :data="list">
              <el-table-column label="序号" width="100" type="index" />
              <el-table-column label="角色名称" width="240" prop="name" />
              <el-table-column label="描述" prop="description" />
              <el-table-column label="操作" width="300">
                <el-button size="small" type="success">分配权限</el-button>
                <el-button size="small" type="primary">编辑</el-button>
                <el-button size="small" type="danger">删除</el-button>
              </el-table-column>
            </el-table>
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              layout="total, sizes, prev, pager, next, jumper"
              :page-sizes="[10, 8, 5, 2]"
              :total="total"
              style="margin-top: 40px; text-align: center"
            >
            </el-pagination>
          </el-tab-pane>
          <el-tab-pane label="公司信息">
            <!-- 警告信息 -->
            <el-alert
              title="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改"
              type="info"
              show-icon
              :closable="false"
            />
            <!-- 表单 -->
            <el-form label-width="120px" style="margin-top: 50px">
              <el-form-item label="公司名称">
                <el-input
                  disabled
                  style="width: 400px"
                  :value="companyinfo.name"
                />
              </el-form-item>
              <el-form-item label="公司地址">
                <el-input
                  disabled
                  style="width: 400px"
                  :value="companyinfo.companyAddress"
                />
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input
                  disabled
                  style="width: 400px"
                  :value="companyinfo.mailbox"
                />
              </el-form-item>
              <el-form-item label="备注">
                <el-input
                  type="textarea"
                  :rows="3"
                  disabled
                  style="width: 400px"
                  :value="companyinfo.remarks"
                />
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>

      <el-dialog
        title="编辑角色"
        :visible.sync="centerDialogVisible"
        width="30%"
        center
      >
        <el-form
          ref="form"
          :model="form"
          label-width="120px"
          label-position="left"
        >
          <el-form-item label="角色名称">
            <el-input placeholder="请输入角色名称"></el-input>
          </el-form-item>
          <el-form-item label="角色描述">
            <el-input placeholder="请输入描述信息"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary">提交</el-button>
            <el-button @click="centerDialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getRoleListAPI, getCopanyInfoAPI } from '@/api/setting'
export default {
  data () {
    return {
      total: undefined,
      data: {
        page: 1,
        pagesize: 10
      },
      form: {},
      list: [],
      companyinfo: {},
      centerDialogVisible: false
    }
  },
  methods: {
    async getCompanyInfo () {
      const {
        data: { data }
      } = await getCopanyInfoAPI()
      console.log(data)
      this.companyinfo = data
    },
    /**
     * 当前页码改变事件
     */
    handleCurrentChange (val) {
      this.data.page = val.toString()
      this.getRoleList()
    },
    /**
     * 改变当前最大显示条目
     */
    handleSizeChange (val) {
      this.data.pagesize = val.toString()
      this.getRoleList()
    },
    /**
     * 获取员工列表
     */
    async getRoleList () {
      const {
        data: { data }
      } = await getRoleListAPI(this.data)
      this.total = data.total
      this.list = data.rows
    }
  },
  created () {
    this.getRoleList()
    this.getCompanyInfo()
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  background-color: #409eff;
  text-align: left;
  span {
    color: #fff;
  }
  i {
    color: #fff;
  }
}
</style>
